import { Layout } from 'antd';
import { Footer } from 'antd/es/layout/layout';
import { useScroll } from 'framer-motion';
import {
  type CSSProperties,
  Suspense,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import { Helmet } from 'react-helmet-async';

import { CircleLoading } from '@/components/loading';
import ProgressBar from '@/components/progress-bar';
import useInitialize from '@/hooks/event/use-initialize';
import { useConfigActions } from '@/store/configStore';
import { useSettingActions, useSettings } from '@/store/settingStore';
import { useResponsive } from '@/theme/hooks';
import { ThemeLayout } from '@/types/enum';

import { NAV_COLLAPSED_WIDTH, NAV_WIDTH } from './config';
import Main from './main';
import Nav from './nav';

function DashboardLayout() {
  const { themeLayout } = useSettings();
  const settings = useSettings();
  const { screenMap } = useResponsive();
  const { setSettings } = useSettingActions();

  const mainEl = useRef<HTMLDivElement>(null);
  const { scrollY } = useScroll({ container: mainEl });

  /**
   *  Tracks if content is scrolled
   */
  const [offsetTop, setOffsetTop] = useState(false);

  const onOffSetTop = useCallback(() => {
    scrollY.on('change', (scrollHeight) => {
      setOffsetTop(scrollHeight > 0);
    });
  }, [scrollY]);

  useEffect(() => {
    onOffSetTop();
  }, [onOffSetTop]);

  const layoutClassName = useMemo(() => {
    return `bg-[#edeff7] flex h-screen overflow-hidden ${
      themeLayout === ThemeLayout.Horizontal ? 'flex-col' : 'flex-row'
    }`;
  }, [themeLayout]);

  const secondLayoutStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    background: '#edeff7',
    transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
    paddingLeft: screenMap.md
      ? themeLayout === ThemeLayout.Horizontal
        ? 0
        : themeLayout === ThemeLayout.Mini
        ? NAV_COLLAPSED_WIDTH
        : NAV_WIDTH
      : 0,
  };

  const { fetchInitialInfo } = useConfigActions();
  const { setEnable_knowledge_governance } = useInitialize();
  useEffect(() => {
    const init = async () => {
      const res = await fetchInitialInfo();
      setEnable_knowledge_governance(res.enable_knowledge_governance ?? false);
    };
    init();
  }, []);

  useEffect(() => {
    const layout = screenMap.md
      ? screenMap.lg
        ? ThemeLayout.Vertical
        : ThemeLayout.Mini
      : ThemeLayout.Horizontal;
    setSettings({
      ...settings,
      themeLayout: layout,
    });
  }, [screenMap]);

  return (
    <>
      <ProgressBar />
      <Layout className={layoutClassName}>
        <Helmet>
          <title>天工睿核智能体</title>
          <link rel="icon" href="/favicon-eai.ico" />
        </Helmet>
        <Suspense fallback={<CircleLoading />}>
          <Layout style={secondLayoutStyle}>
            {/* <Header offsetTop={themeLayout !== ThemeLayout.Horizontal && offsetTop} /> */}
            {(themeLayout === ThemeLayout.Vertical || themeLayout === ThemeLayout.Mini) && <Nav />}
            <Main ref={mainEl} offsetTop={false} />
            <Footer style={{ padding: '0px' }}>
              <div> {themeLayout === ThemeLayout.Horizontal && <Nav />}</div>
            </Footer>
          </Layout>
        </Suspense>
      </Layout>
    </>
  );
}
export default DashboardLayout;
